<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="widtd=device-widtd, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .outer {
      width: 400px;
      margin: 100px auto;
      text-align: center;
    }
    table {
      width: 400px;
      border-collapse: collapse;
      margin-bottom: 20px;
    }
    tr,
    td {
      border: 1px black solid;
      padding: 10px 0;
    }
    form div {
      margin: 10px 0;
    }
  </style>
  <body>
    <div class="outer">
      <table>
        <tbody>
          <tr>
            <td>姓名</td>
            <td>邮件</td>
            <td>薪资</td>
            <td>操作</td>
          </tr>
          <tr>
            <td>孙悟空</td>
            <td>swk@hgs.com</td>
            <td>10000</td>
            <td><a href="javascript:;" class="td-a">删除</a></td>
          </tr>

          <tr>
            <td>猪八戒</td>
            <td>zbj@hgs.com</td>
            <td>8000</td>
            <td><a href="javascript:;" class="td-a">删除</a></td>
          </tr>
          <tr>
            <td>沙和尚</td>
            <td>shs@hgs.com</td>
            <td>6000</td>
            <td><a href="javascript:;" class="td-a">删除</a></td>
          </tr>
        </tbody>
      </table>
      <form action="#">
        <div>
          <label for="name">姓名</label>
          <input type="text" id="name" />
        </div>
        <div>
          <label for="name">邮件</label>
          <input type="email" id="email" />
        </div>
        <div>
          <label for="name">薪资 </label>
          <input type="number" id="salary" />
        </div>
        <button id="btn1" type="button">添加</button>
      </form>
    </div>
    <script>
      const outerform = document.querySelectorAll('.outer > form > div');
      const btn1 = document.getElementById('btn1');
      const tbody = document.querySelector('tbody');
      const tdA = document.getElementsByClassName('td-a');
      console.log(tdA);
      let i = 0;
      // 删除超链接的单击响应函数
      document.addEventListener('click', function (event) {
        if ([...tdA].includes(event.target)) {
          i++;
          // 利用给当前超链接添加id来获得当前元素
          event.target.id = `${i}`;
          (function () {
            // 获得元素
            const Ad = document.getElementById(`${i}`);
            // 获取被响应的事件的爷元素td
            const td = Ad.parentNode.parentNode;
            // 获取第一个列表的文字
            const empName = td.firstElementChild.textContent;
            // 然后询问是否删除
            if (confirm('确认是否删除[' + empName + ']吗?')) {
              td.remove();
            }
          })();
        }
        // 添加按钮的单击响应函数
        if ([btn1].includes(event.target)) {
          (function () {
            // 获取三个值
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const salary = document.getElementById('salary').value;
            // 创建四个元素节点
            const tr = document.createElement('tr');
            const nameTd = document.createElement('td');
            const emailTd = document.createElement('td');
            const salaryTd = document.createElement('td');
            // 给三个td赋值
            nameTd.textContent = name;
            emailTd.textContent = email;
            salaryTd.textContent = salary;
            tr.appendChild(nameTd);
            tr.appendChild(emailTd);
            tr.appendChild(salaryTd);
            // 装到tr内 并且输出到tbody列表的最后面
            tr.insertAdjacentHTML('beforeend', '<td><a href="javascript:;" class="td-a">删除</a></td>');
            tbody.appendChild(tr);
          })();
        }
      });

      /* 
    实现添加功能,将表单form内的三个input的值通过按钮btn1输入到相应的表格上去
    实现超链接的删除功能,把当前超链接所在的tr表格信息删除

*/
      /* 
    如果说使用document.links,会获取全局,会导致所有的超链接都被获取到,操作的时候也是一样
    可以用选择器来选择
*/
      // const tdA = document.querySelectorAll('.td-a');
      // console.log(tdA);
      // document.addEventListener('click', (event) => {
      //   // 出发条件...
      //   if ([...tdA].includes(event.target)) {
      //     let i = event.target;
      //     // 让0变成变量,并且是当前触发的超链接
      //     ((g) => {
      //       const tr = tda[g].parentNode.parentNode;
      //       const empName = tr.firstElementChild.textContent;
      //       if (confirm('确认是否删除[' + empName + ']吗?')) {
      //         tr.remove();
      //       }
      //     })(i);
      //   }
      // });

      // 如果把函数写在循环内,那么循环一次,函数就执行一次,这样就重复声明了,性能不好
      // for (let i = 0; i < trlinks.length; i++) {
      //     trlinks[i].addEventListener("click", function () {
      //         /*
      //             本练习中的超链接,我们是不希望发生跳转,但是跳转行为是超链接的默认行为
      //             只要点击号链接就会触发页面的跳转,事件中可以通过取消默认行为来阻止超链接的跳转
      //             使用return false 来取消,只在 xxx.xxx = function(){}这个形式绑定的事件中才适用
      //             return false
      //         */
      //         // 删除当前超链接所在的tr内的td内容,可以通过tdis,也就说,他循环在哪次,我们用的就是哪次超链接的tr
      //         console.log(trlinks);
      //         // 先获取tdis的祖先元素tr
      //         const tr = trlinks[i].parentNode.parentNode
      //         // 获取要删除的员工的姓名
      //         //获取tr.的第一个子元素的文字
      //         const empName = tr.firstElementChild.textContent
      //         //一般来说,要删东西都会给出一个提醒,提醒是否要删,confirm函数可以弹出是与否,并且返回一个布尔值
      //         if (confirm("确认是否删除[" + empName + "]吗?")) {
      //             tr.remove()
      //         }
      //     })

      // }
      // 先获取每个input的div属性
      // const outerform = document.querySelectorAll('.outer > form > div');
      // console.log(outerform);
      // // 然后获取每个input的value值!
      // // 获取btn
      // const btn1 = document.getElementById('btn1');
      // // btn1.addEventListener("click", function () {
      // //     for (let i = 0; i < outerform.lengtd; i++) {
      // //         // 把每个input的 value值获取到
      // //         const divinput = outerform[i].querySelector("input")
      // //         console.log(divinput.value);
      // //         // 获取到后把值复制到tbody里
      // //         /*
      // //         从第一个tr后添加一个tr,里面包含三个td,td内有三个分别获取到的值
      // //         */
      // //         // 获取tbody元素,并且在元素的最后添加获取到的值
      // //         const tbody = document.querySelector(".outer > table > tbody")
      // //         console.log(tbody);
      // //         const td = document.createElement('td')
      // //         td.textContent = `<td>${divinput.value}</td>`
      // //         tbody.insertAdjacentdTML("beforeend", td)
      // //     }
      // // }) 笨逼思考半天的代码

      // const tbody = document.querySelector('tbody');
      // btn1.onclick = function () {
      //   // 获取用户输入的数据
      //   // 获取的是id为name的元素的value属性
      //   const name = document.getElementById('name').value;
      //   const email = document.getElementById('email').value;
      //   const salary = document.getElementById('salary').value;

      //   // 然后向tbody的最后面输出获得的元素 =就是
      /* 
    <tr>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td><a href="javascript:;">删除</a></td>
          </tr>
    */
      // tbody.insertAdjacentdTML("beforeend",
      //     `
      //     <tr>
      //     <td>${name}</td>
      //     <td>${email}</td>
      //     <td>${salary}</td>
      //     <td><a href="javascript:;" id="td-a">删除</a></td>
      //     </tr>
      //     `
      //     /*
      //     由于上面的超链接是新添加的,所以上边柄没有绑定单机相应函数,所以新添加的员工无法删除
      //     // 结果方式,为新添加的超链接也加上绑定响应函数
      //      */

      // )
      // 另外一种方法:
      // 可以避免XSS入侵
      // 创建Tr元素,作为目录
      //   const tr = document.createElement('tr');
      //   // 创建三个td元素,并且将文本内容设置为三个value属性
      //   const nameTd = document.createElement('td');
      //   const emailTd = document.createElement('td');
      //   const salaryTd = document.createElement('td');
      //   nameTd.textContent = name;
      //   emailTd.textContent = email;
      //   salaryTd.textContent = salary;
      //   // console.log(name);
      //   // console.log(email);
      //   // console.log(salary);
      //   // 将三个td加入到tr中,还有固定不变的删除的<a>超链接
      //   tr.appendChild(nameTd);
      //   tr.appendChild(emailTd);
      //   tr.appendChild(salaryTd);
      //   tr.insertAdjacentHTML('beforeend', '<td><a href="javascript:;" class="td-a">删除</a></td>');
      //   // 然后将其添加到tbody中,让其进入列表
      //   tbody.appendChild(tr);
      // };
      // const newlinks = document.links;
      // // 这个暂时还不会,等后面学到,我再给他绑定上去
    </script>
  </body>
</html>
